const { Component } = require("react");


class DemoA extends Component {
  constructor(props) {
    super(props)
    console.log("constructor...", props);
    this.state = {
      num: 1
    }
    this.add = this.add.bind(this);
  }
  add() {
    // re-render
    this.setState((state, props) => ({ num: state.num + 1 }))
  }
  render() {
    console.log("render...");
    let { num } = this.state;
    return (
      <div>
        <h2>类组件</h2>
        <h3>{num}</h3>
        {/* <h3>{this.renderHn()}</h3> */}
        <button onClick={this.add}>+1</button>
      </div>
    )
  }

  // 类似于vue中的updated，表示页面再次渲染完毕
  // 在componentDidUpdate也可以监听数据变化。
  // vue中，有一个叫updated钩子，也可以监听数据变化。监听器。
  // 在React中，如何实现类似于Vue中的监听器？
  // 答：componentDidUpdate
  componentDidUpdate() {
    console.log("componentDidUpdate...");
  }

  componentDidMount() {
    console.log("componentDidMount...");
  }
}

export default DemoA;
